<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>FortBook</title>
    <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="assets/style/reset.css" media="all" />
    <link rel="stylesheet" href="assets/style/default.css" media="all" />
</head>
<body>
<div id="slider" class="swipe">
    <div class="swipe-wrap">

        <div id="cumulus">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3></h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

        <div id="altostratus">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3>s</h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

        <div id="stratus">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3>s</h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

        <div id="kitchen">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3>s</h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

        <div id="demoRoom">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3>s</h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

        <div id="cirrus">

            <div class="now" >
                <h1 class="meeting-room"></h1>
                <h3>s</h3>
            </div>
            <div class="all-entries">
                <ul>

                </ul>
            </div>

        </div>

    </div>
</div>


    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script src="http://backbonejs.org/backbone-min.js"></script>
    <script src="assets/script/swipe/swipe.js"></script>
    <script src="assets/script/model/calendar.model.js"></script>
    <script src="assets/script/view/calendar.view.js"></script>
    <script src="assets/script/view/cumulus.view.js"></script>
    <script src="assets/script/view/altostratus.view.js"></script>
    <script src="assets/script/view/stratus.view.js"></script>
    <script src="assets/script/view/cirrus.view.js"></script>
    <script src="assets/script/view/demoroom.view.js"></script>
    <script src="assets/script/view/kitchen.view.js"></script>
    <script>
        window.mySwipe = Swipe(document.getElementById('slider'), {callback: function() {
            if($(document).scrollTop() > 0) {
                $("html, body").animate({ scrollTop: 0 }, 500);
            }
        }});
        $(document).keydown(function(e){
            if (e.keyCode == 37) {
                mySwipe.prev();
                return false;
            }
            else if(e.keyCode == 39){
                mySwipe.next();
                return false;
            }
        });
    </script>
</body>
</html>